<template>
  <div class="home" :style="'min-height:'+itemHeight.height">
    <!-- 公告 -->
    <div class="h-title">
      <i class="h-title-icon"></i>
      <vue-seamless-scroll :data="pageData.scrollList" :class-option="classOption" class="scroll-content">
        <div class="scroll-title" v-for="(item,index) in pageData.scrollList" :key="index">
          <div>{{ item.content }}</div>
          <div class="scroll-time">{{ item.createTime }}</div>
        </div>
      </vue-seamless-scroll>
    </div>
    <!-- content -->
    <div class="h-content">
      <!-- 下注列表 -->
      <vue-seamless-scroll :data="pageData.chinPinInfos" :class-option="conLeftScroll"
                           style="float: left;width: 74%;max-height: 790px;">
        <div class="con-left">
          <div :class="chipinInfoStyle(item.chipinInfos)" v-for="item of pageData.chinPinInfos">
            <div class="con-title">
              <div class="con-leftTit-text"><span class="con-leftTit-num">{{ item.positionNo|chinpinPos }}</span>号位
              </div>
              <div class="con-rightTit-text">洗码号<span class="con-rightTit-num">{{ item.account }}</span></div>
            </div>
            <div class="con-box">
              <div class="con-box-text con-box-z" v-if="item.chipinInfos['1024']">庄</div>
              {{ item.chipinInfos['1024'] |chinpinValue }}
              <div class="con-box-text con-box-x" v-if="item.chipinInfos['512']">闲</div>
              {{ item.chipinInfos['512']| chinpinValue }}
            </div>

            <div class="con-boxData">
              <div class="con-data con-data-red" v-if="item.chipinInfos['32']"><i
                  class="con-data-redIcon"></i><span>庄对</span>{{ item.chipinInfos['32']| chinpinValue }}
              </div>
              <div class="con-data con-data-green" v-if="item.chipinInfos['256']"><i
                  class="con-data-greenIcon"></i><span>和</span>{{ item.chipinInfos['256']| chinpinValue }}
              </div>
              <div class="con-data con-data-blue" v-if="item.chipinInfos['16']"><i
                  class="con-data-blueIcon"></i><span>闲对</span>{{ item.chipinInfos['16'] |chinpinValue }}
              </div>
            </div>
          </div>
          <!-- 这个占位元素不要删 -->
          <div class="con-item"></div>
          <!-- 这个占位元素不要删 end -->
        </div>
      </vue-seamless-scroll>


      <div class="con-right">
        <div class="con-content" v-if="pageData.layFlowInfo.status>2">
          <div class="r-title">
            <div class="con-title-text">洗码号</div>
            <div class="con-title-num">{{ pageData.compensateInfo.account }}</div>
          </div>
          <div class="r-content">
            <div class="r-con-title">
              <div class="r-tit-text">下注</div>
              <div class="r-tit-text">赔付</div>
            </div>
            <div class="r-con-box">
              <div class="r-box-item">

                <div :class="compensateStyle">
                  <div class="con-box-text">{{ pageData.compensateInfo.chipinPosition }}</div>
                  {{ pageData.compensateInfo.chipinAmount }}
                </div>
              </div>
              <div class="r-box-item">
                <div :class="compensateStyle">
                  <div class="con-box-text">{{ pageData.compensateInfo.compenSatePosition }}</div>
                  {{ pageData.compensateInfo.compenSateAmount }}
                </div>
              </div>
            </div>
          </div>
          <div class="r-bottom">
            <div class="r-bottom-left"><i class="r-bottom-icon"></i>总赢</div>
            <div class="r-bottom-right">{{ pageData.compensateInfo.totalAmount }}</div>
          </div>
        </div>
        <div class="con-content" v-if="pageData.layFlowInfo.status<3">
          <div class="r-title-pool">
            <div class="con-title-text">即时奖池</div>
          </div>
          <div class="r-content">
            <div :class="colorPoolStyle(key)" v-for=" (value,key) of pageData.colorPool">
              <div class="r-tit-text">{{ key }}总押</div>
              <div class="r-tit-text">{{ value }}</div>
            </div>

          </div>
          <div class="r-bottom">
            <!--            <div class="r-bottom-left"><i class="r-bottom-icon"></i>总赢</div>
                        <div class="r-bottom-right">{{ pageData.compensateInfo.totalAmount }}</div>-->
          </div>
        </div>
        <!-- 下注台 -->
        <div class="station">
          <div class="sta-title">
            <div class="sta-tit-left">{{ config.deskNo }}号台{{ chipinStatus }}</div>
            <div class="sta-tit-right">{{ pageData.countdown }}</div>
          </div>
          <div class="sta-box">
            <div :class="redLimitStyle(item.positionCode)" v-for="item of pageData.layFlowInfo.redLimitDTOS">
              <span>{{ item.positionTitle }}</span> {{ item.minRed }}-{{ item.maxRed }}
            </div>
            <!--            <div class="sta-text sta-x"><span>闲</span>20-10000</div>
                        <div class="sta-text sta-h"><span>和</span>20-10000</div>
                        <div class="sta-text sta-x"><span>闲对</span>20-10000</div>
                        <div class="sta-text sta-z"><span>庄对</span>20-10000</div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="con-center" v-if="openCardsFlag">
      <div class="r-title-pool">
        <div class="con-title-text-result">开牌结果</div>
      </div>
      <div class="r-content">
        <span :class="resultStyle(dic.resultCode[item].code)"
              v-for="item of pageData.result">{{ item | resultParse(that) }}</span>

      </div>
      <div class="r-bottom">
        <!--            <div class="r-bottom-left"><i class="r-bottom-icon"></i>总赢</div>
                    <div class="r-bottom-right">{{ pageData.compensateInfo.totalAmount }}</div>-->
      </div>
    </div>
  </div>

</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import vueSeamlessScroll from 'vue-seamless-scroll'
import {dateFormat} from '@/util/date'

export default {
  name: "Home",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      that: this,
      config: {deskNo: undefined},
      websock: null,

      itemHeight: {
        height: '1000px'
      },
      pageData: {
        layFlowInfo: {
          gameType: 0,
          deskNo: '',
          status: 2,
          redLimitDTOS: [/*{"positionTitle": "庄", "minRed": "22", "maxRed": "1000"}*/]
        },
        countdown: 10,
        scrollList: [{"content": '1.公告公告公告公告，公告公告公告公告！', "createTime": "2020-12-10"}],
        chinPinInfos: [{
          "account": 'xm007',
          "positionNo": 1,
          "chipinInfos": {"1024": "庄_500", "512": "闲_600", "32": "庄对_300","256":"和_100","16":"闲对_200"}
        }, {
          "account": 'xm007',
          "positionNo": 2,
          "chipinInfos": {"512": "闲_600"}
        }],
        compensateInfo: {},
        colorPool: {
          "庄": 0,
          "闲": 0,
          "和": 0,
          "庄对": 0,
          "闲对": 0
        },
        result: []
      },
      dic: {
        statusDic: {0: "未开牌", 1: "下注中", 2: "开牌中", 3: "赔付中"},
        resultCode: {
          52: {code: 1024, title: ["庄", "庄", "龙"]},
          53: {code: 512, title: ["闲", "闲", "虎"]},
          54: {code: 256, title: ["和", "和", "和"]},
          55: {code: 32, title: ["庄对"]},
          56: {code: 16, title: ["闲对"]},
        },
        style: {"庄": "r-zhuang", "闲": "r-leisure", "和": "r-he", "庄对": "r-zd", "闲对": "r-xd"}
      },
      classOption: {
        singleHeight: 52,
        limitMoveNum: 1,
        direction: 1,
        waitTime: 2000,
        step: 0.3,
        hoverStop: true
      },
      conLeftScroll: {
        // singleHeight: 790,
        limitMoveNum: 13,
        direction: 1,
        waitTime: 2000,
        step: 1,
        hoverStop: true
      },
      timeTask: {
        task1: undefined,
        task2: undefined
      }
    }
  },
  created() {
    let deskNo = this.$route.params.deskNo
    if (!deskNo) {
      this.$message.error("请在url配置台桌编号")
      return
    }
    this.config.deskNo = deskNo;
    this.initWebSocket();
    this.initFunc();
    this.initCompensate();
  },
  mounted() {
    window.addEventListener('resize', this.getHeight())
    window.onresize = () => {
      return (() => {
        this.getHeight()
      })();
    };
  },
  computed: {
    chipinStatus() {
      let status = this.pageData.layFlowInfo.status;
      return this.dic.statusDic[status];
    },
    compensateStyle() {
      let position = this.pageData.compensateInfo.chipinPosition;
      let style = this.dic.style[position];
      return "con-box " + style;
    },
    openCardsFlag() {
      return this.pageData.layFlowInfo.status == 2 && this.pageData.result.length > 0
    }

  },
  filters: {
    resultParse: function (value, that) {
      let gameType = that.pageData.layFlowInfo.gameType;
      return that.dic.resultCode[value].title[gameType];
    },
    chinpinPos: function (value) {
      return value == 9 ? "S" : value;

    },
    chinpinValue: function (value) {
      if (!value) {
        return value
      }
      return value.split('_')[1];
    }

  },
  methods: {
    chipinInfoStyle(data) {
      let chipin = data;
      if ((chipin["1024"]) && (chipin["512"])) {
        let z = chipin["1024"].split("_")[1]
        let x = chipin["512"].split("_")[1]
        if (z > x) {
          return "con-item zhuang"
        }
        if (z < x) {
          return "con-item leisure"
        }
        return "con-item other"
      }
      if (chipin["1024"]) {
        return "con-item zhuang"
      }
      if (chipin["512"]) {
        return "con-item leisure"
      }
      return "con-item other"
    },
    redLimitStyle(data) {

      if (data == 1024 || data == 32) {
        return "sta-text sta-z"
      }
      if (data == 512 || data == 16) {
        return "sta-text sta-x"
      }
      return "sta-text sta-h"
    },
    resultStyle(data) {

      if (data == 1024 || data == 32) {
        return "r-content-result sta-z"
      }
      if (data == 512 || data == 16) {
        return "r-content-result sta-x"
      }
      return "r-content-result sta-h"
    },
    colorPoolStyle(key) {
      if (key == "庄" || key == "龙" || key == "庄对") {
        return "r-con-title-pool sta-z"
      }
      if (key == "闲" || key == "虎" || key == "闲对") {
        return "r-con-title-pool sta-x"
      }
      return "r-con-title-pool sta-h"

    },
    getHeight() {
      this.itemHeight.height = window.innerHeight + 'px'
    },
    initFunc() {
      window.document.onkeypress = this.onKeyPress;
    },
    initCompensate() {
      this.pageData.compensateInfo = {
        "account": "",
        "compenSatePosition": "",
        "chipinPosition": "",
        "compenSateAmount": "",
        "chipinAmount": "",
        "totalAmount": "0"
      }
    },
    onKeyPress: function (e) {
      switch (e.keyCode) {
        case 42:
        case 49:
          let status = this.pageData.layFlowInfo.status;
          if (status == 3 || status == 0) {
            this.sendMessage("start_chin_pin", {deskNo: this.config.deskNo, layNo: 0, bootNo: e.keyCode == 42 ? 1 : 0})
            this.pageData.result = [];
          }
          return;
        case 50:
          if (this.pageData.layFlowInfo.status == 1) {
            this.sendMessage("stop_chin_pin")
          }
          return
        case 51:
          if (this.pageData.layFlowInfo.status == 3) {
            this.sendMessage("compensate")
          }
          return;
        case 57:
          if (this.pageData.layFlowInfo.status < 3) {
            this.pageData.result = [];
          }
        case 13:
          if (this.pageData.layFlowInfo.status == 2) {
            let results = this.pageData.result;
            if (results.length == 0) {
              return;
            }
            debugger
            let resultObj = this.dic.resultCode;
            let resultCode = results.length > 1 ? resultObj[results[0]].code | resultObj[results[1]].code : resultObj[results[0]].code;
            this.sendMessage("open_card", resultCode)
            this.initCompensate();
            return;
          }
        default:
          if (this.pageData.layFlowInfo.status == 2) {
            this.outputResult(e.keyCode)
          }
      }

    },
    outputResult(code) {
      this.pageData.result.push(code);
    },
    initData() {
      this.sendMessage("lay_flow")
      this.sendMessage("announcement")
      this.sendMessage("chipin_info")
      this.sendMessage("countdown")
      this.sendMessage("heartbeatTime");
      /* this.heartbeatTime();*/
    },
    initWebSocket() { //初始化weosocket
      const wsuri = "ws://hjy.api:5088/websocket/" + this.config.deskNo;
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocktopopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
      this.heartbeatTime();
    },
    sendMessage(resources, body) {
      if (this.websock.readyState === this.websock.CLOSED) {
        this.initWebSocket();
      }
      let message = {identify: this.config.deskNo, resourcesIdentify: resources, body: JSON.stringify(body)}
      this.websock.send(JSON.stringify(message));
    },
    websocktopopen() {
      this.$notify({
        message: '服务器连接成功',
        position: 'bottom-left'
      });
      this.initData();
    },
    websocketonerror() {//连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) { //数据接收
      let redata = JSON.parse(e.data);
      let identify = redata.resourcesIdentify;
      this.messageHandler(identify + "Handler", redata.body)
      console.log(redata)
    },
    websocketclose(e) {
      this.$notify({
        message: '服务器连接断开',
        position: 'bottom-left'
      });//关闭
      console.log('断开连接', e);
    },
    messageHandler(methodName, data) {
      let method = this[methodName];
      method(data);
    },
    lay_flowHandler(data) {
      this.pageData.layFlowInfo = JSON.parse(data);
    },
    chipin_infoHandler(data) {
      this.pageData.chinPinInfos = JSON.parse(data);
    },
    compensate_infoHandler(data) {
      this.pageData.compensateInfo = JSON.parse(data);
    },
    announcementHandler(data) {
      let parse = JSON.parse(data);
      parse.forEach(item => {
        item.createTime = dateFormat(new Date(parseInt(item.createTime)));
      })
      this.pageData.scrollList = parse
    },
    countdownHandler(data) {
      this.pageData.countdown = parseInt(data)
      if (!this.timeTask.task1) {
        this.time();
      }
    },
    color_poolHandler(data) {
      this.pageData.colorPool = JSON.parse(data);
      ;
    },
    hintHandler(data) {
      this.$notify({
        title: '警告',
        message: data,
        type: 'warning',
        position: 'bottom-right',
        duration: 5000
      });

    }, time() {
      this.timeTask.task1 = setInterval(() => {
        if (this.pageData.layFlowInfo.status != 1) {
          this.pageData.countdown = 0;
          window.clearInterval(this.timeTask.task1);
          this.timeTask.task1 = undefined;
          return;
        }
        if (this.pageData.countdown == 0) {
          window.clearInterval(this.timeTask.task1);
          this.timeTask.task1 = undefined;
          this.sendMessage("stop_chin_pin")
          return
        }
        this.pageData.countdown--;
      }, 1000);
    }, heartbeatTime() {
      this.timeTask.task2 = setInterval(() => {
        this.sendMessage("heartbeat")
      }, 3000);
    }
  },

  destroyed() {
    window.removeEventListener('resize', this.getHeight())
    this.websock.close() //离开路由之后断开websocket连接
  }
};
</script>

<style>
/* 下注台 */
.station {
  background: #FFEDD8;
  padding: 32px 16px 20px 16px;
  box-shadow: inset 0px 8px 0px rgba(230, 173, 106, 0.25);
  border-radius: 20px;
  margin-top: 20px;
}

.sta-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.sta-tit-left {
  width: 293px;
  height: 75px;
  font-size: 24px;
  font-weight: 700;
  background: #E6AD6A;
  box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.sta-tit-right {
  width: 98px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  background: #E6AD6A;
  box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.25);
  border-radius: 20px;
}

.sta-box {
  min-height: 241px;
  margin-top: 20px;
  background-image: url(../assets/img/Rectangle%2019.png);
  background-size: 100% 100%;
  padding: 23px;
}

.sta-text {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  padding: 4px 0;
}

.sta-text span {
  padding: 3px;
  color: #fff;
  border-radius: 5px;
  margin-right: 8px;
}

.sta-z {
  color: #CD0000;
}

.sta-z span {
  background: #CD0000;
}

.sta-x {
  color: #293D85;
}

.sta-x span {
  background: #293D85;
}

.sta-h {
  color: #1B8E3B;
}

.sta-h span {
  background: #1B8E3B;
}

/* content */
.leisure {
  background: linear-gradient(119.64deg, #8178E7 0%, #FFFFFF 128.55%);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1), inset 0px 8px 0px rgba(255, 255, 255, 0.25);
}

.zhuang {
  background: linear-gradient(119.64deg, #E66969 0%, #FFFFFF 128.55%);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1), inset 0px 8px 0px rgba(255, 255, 255, 0.25);
}

.other {
  background: linear-gradient(119.64deg, #7f21af 0%, #FFFFFF 128.55%);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1), inset 0px 8px 0px rgba(255, 255, 255, 0.25);
}

.h-content {
  margin-top: 10px;
  overflow: hidden;
}

.con-left {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  float: left;
}
.con-left .con-box .con-box-text{margin-left: 10px;}
.con-left .con-box .con-box-text:first-child{margin-left: 0;}
.con-right {
  width: 24%;
  float: right;
}

.con-center {
  width: 700px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.con-title {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.con-item {
  width: 26%;
  border-radius: 20px;
  padding: 1.2% 3% 1% 3%;
  margin-top: 25px;
  height: 130px;
  position: relative;
}

.con-title-num {
  font-size: 32px;
}

.con-title-text {
  font-size: 25px;
}

.con-title-text-result {
  font-size: 40px;
}

.con-leftTit-text {
  padding: 1% 4%;
  text-align: center;
  font-size: 12px;
  background: #CAC5F5;
  border-radius: 20px 0px;
  position: absolute;
  top: 0;
  left: 0;
}

.con-leftTit-num {
  font-size: 24px;
}

.con-rightTit-text {
  font-size: 26px;
}

.con-rightTit-num {
  font-size: 32px;
  margin-left: 8px;
}

.con-box {
  margin-top: 10px;
  display: flex;
  font-size: 30px;
  font-weight: 700;
}

.con-box-text {
  border-radius: 2px;
  color: #fff;
  font-size: 24px;
  margin-right: 3px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: 400;
}

.con-box-x  {
  background-color: #293D85;
}

.con-box-z {
  background-color: #CD0000;
}

.con-box-h{
  background-color: #7f21af;
}

.leisure .con-leftTit-text {
  color: #293D85;
  background-color: #CAC5F5;
}

.zhuang .con-leftTit-text {
  color: #CD0000;
  background-color: #F3B6B6;
}

.other .con-leftTit-text {
  color: #7f21af;
  background-color: #eac8fc;
}

.r-leisure .con-box-text {
  background-color: #293D85;
}

.r-zhuang .con-box-text {
  background-color: #CD0000;
}

.leisure .con-box {
  color: #293D85;
}

.zhuang .con-box {
  color: #CD0000;
}

.r-leisure {
  color: #293D85;
}

.r-zhuang {
  color: #CD0000;
}

.r-he {
  color: green;
}

.r-zd {
  color: #CD0000;
}

.r-xd {
  color: #071752;
}

.con-data {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  padding-top: 5px;
}

.con-data span {
  color: #fff;
  padding: 1px 3px;
  border-radius: 5px;
  margin-right: 4px;
  font-size: 20px;
}

.con-boxData {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.con-data-red {
  /* color: #CD0000; */
}

.con-data-red span {
  background-color: #CD0000;
}

.con-data-redIcon {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #CD0000;
  margin-right: 4px;
}

.con-data-green {
  /* color: #1B8E3B; */
}

.con-data-green span {
  background-color: #1B8E3B;
}

.con-data-greenIcon {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: green;
  margin-right: 4px;
}

.con-data-blue {
  color: #293D85;
}

.con-data-blue span {
  background-color: #293D85;
}

.con-data-blueIcon {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #071752;
  margin-right: 4px;
 /* display: none;*/
}

.con-right {
  border-radius: 20px;
  margin-top: 25px;
  overflow: hidden;
}

.r-title {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 28px;
  padding: 4% 6% 1% 6%;
  background-image: url(../assets/img/rTiteBg.png);
  background-size: 100% 100%;
}

.r-title-pool {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 28px;
  padding: 4% 6% 1% 6%;
  background-image: url(../assets/img/rTiteBg.png);
  background-size: 100% 100%;
}

.r-content {
  background: linear-gradient(180deg, #E6AD6A 0%, #FFFFFF 58.47%);
}

.r-content-result {
  margin-right: 20px;
  font-size: 127px;
  font-weight: 800
}

.r-con-title {
  padding: 8px 0;
  border-bottom: 1px solid #BB7D33;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #BB7D33;
  font-weight: 700;
  font-size: 20px;
}

.r-con-title-pool {
  padding: 8px 0;
  border-bottom: 1px solid #BB7D33;
  display: flex;
  align-items: center;
  justify-content: space-around;

  font-weight: 700;
  font-size: 20px;
}

.r-con-box {
  display: flex;
  position: relative;
}

.r-con-box .r-box-item:first-child {
  border-right: 1px solid #BB7D33
}

.r-box-item {
  width: 50%;
  height: 278px;
  overflow-y: auto;
  background: transparent;
  margin-left: 24px;
}

.r-box-item::-webkit-scrollbar {
  width: 6px;
  background-color: rgba(187, 125, 51, 0.6);
}

.r-box-item::-webkit-scrollbar-thumb {
  background-color: rgba(187, 125, 51, 0.6);
  border-radius: 6px;
}

.r-box-item::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(187, 125, 51, 0.6);
  background-color: #fff;
}

.r-bottom {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  background: #E6AD6A;
  border-radius: 0px 0px 20px 20px;
  padding: 3% 6%;
}

.r-bottom-left {
  font-size: 16px;
  display: flex;
}

.r-bottom-right {
  font-size: 28px;
}

.r-bottom-icon {
  width: 20px;
  height: 20px;
  background-image: url(../assets/img/moneyIcon.png);
  background-size: 100% 100%;
  margin-right: 6px;
}

/* 公告 */
.home {
  padding: 20px 25px;
  background-color: #071752;
}

.h-title-icon {
  width: 32px;
  height: 32px;
  background-image: url(../assets/img/horn.png);
  background-size: 100% 100%;
}

.h-title {
  padding: 0 20px;
  background-color: #e7ad64;
  border-radius: 30px;
  display: flex;
  align-items: center;
  color: #fff;
}

.scroll-content {
  width: 100%;
  height: 52px;
  line-height: 52px;
  overflow: hidden;
  padding-left: 8px;
}

.scroll-title {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  font-weight: 400;
}

.scroll-time {
  font-size: 20px;
}

@media screen and (max-width: 1255px) {
  .con-data {
    font-size: 12px;
  }
}

@media screen and (max-width: 1120px) {
  .con-data {
    font-size: 10px;
  }
}
</style>